<template>
	<div class="inst clear">
		<div class="inst_left fl">
			<div class="inst_tit">药品信息</div>
			<div class="inst_lcon">
				<el-tree
					:props="tree"
					:load="loadNode"
					lazy
					highlight-current
					@node-click="treeClick">
				</el-tree>
			</div>
		</div>
		<div class="inst_right">
			<div class="inst_tit">药品信息 - {{classname}}</div>
			<div class="select_btn">
				<el-input v-model="keyword" placeholder="请输入内容" class="select_input"></el-input>
				<el-button type="primary" @click="searchFun">查询</el-button>
				<el-button type="primary" @click="clearFun">重置</el-button>
			</div>
			<div class="inst_rcon">
				<div class="inst_list">
					<div class="item fl" v-for="(item,idx) in drugList" :key="idx" @click="toDrug(item.GenId)">{{item.Drug_Name}}</div>
				</div>
				<pagination :total="query.total" :page.sync="query.page" :limit.sync="query.limit" @pagination="getList" />
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				tree: {
					label: 'text',
					children: 'ChildNodes',
					isLeaf:'isLeaf'
				},
				keyword:"",
				classid:"",
				classname:"未选择药品",
				query:{
					total:0,
					page:1,
					limit:16
				},
				drugList:[]
			}
		},
		methods:{
			async loadNode(node,resolve) {
				var data=node.level === 0?{}:{parentId:node.data.id}
				let res = await this.$kb.Drug(data);
				for(var i=0;i<res.data.length;i++){
					res.data[i].isLeaf=!res.data[i].hasChildren;
				}
				return resolve(res.data);
			},
			treeClick(node){
				this.classname=node.text;
				if(node.isLeaf){
					this.classid=node.id;
					this.keyword = "";
					this.query={
						total:0,
						page:1,
						limit:16
					}
					this.getList();
				}
			},
			async getList (type) {
				var data={
					pagesize:this.query.limit,
					pagenum:this.query.page,
				}
				if(type){
					data.keyword=this.keyword;
				}else{
					data.classid=this.classid;
				}
				let res=await this.$kb.DrugMonograph(data)
				if(res.code == 200){
					this.drugList = res.data.rows;
					this.query.total = res.data.records;
				}
			},
			toDrug (id) {
				this.$router.push({path:"/kb/instructions/drug?id="+id})
			},
			searchFun(){
				this.query={
					total:0,
					page:1,
					limit:16
				}
				this.getList(true)
			},
			clearFun(){
				this.query={
					total:0,
					page:1,
					limit:106
				}
				this.classid="";
				this.keyword = "";
				this.classname="未选择药品";
				this.drugList=[]
			}
 		}
	}
</script>

<style lang="scss" scoped>
	.inst{
		width:100%;
		padding:10px;
		box-sizing:border-box;
		height:calc(100vh - 95px);
		overflow:hidden;
		.inst_tit{
			height: 32px;
			line-height: 32px;
			width: 100%;
			border-bottom: 1px solid #ccc;
			color: #666;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-weight: bold;
			padding-left: 9px;
			font-size: 12px;
			position:absolute;left:0;top:0;
		}
		.inst_left{
			width:200px;
			height:100%;
			border:1px solid #ccc;
			box-sizing:border-box;
			background:#fff;
			border-radius:3px;
			position:relative;
			padding-top:33px;
		}
		.inst_lcon{
			height:calc(100% - 33px);
			width:100%;
			overflow:auto;
		}
		.inst_right{
			margin-left:210px;
			height:100%;
			border:1px solid #ccc;
			box-sizing:border-box;
			background:#fff;
			border-radius:3px;
			position:relative;padding-top:92px;
			.select_btn{
				width:100%;
				height:60px;
				border-bottom:1px solid #DCDCDC;
				line-height:60px;
				position:absolute;left:0;top:33px;
				.select_input{
					width:200px;
					margin-left:10px;
				}
			}
			.inst_rcon{
				width:100%;height:calc(100% - 92px);overflow:auto;
			}
			.inst_list{
				padding:0 10px;overflow:hidden;
				.item{
					width:25%;
					height:50px;
					line-height:50px;
					font-size:14px;
					color:#444;
					border-top:1px solid #DCDCDC;
					cursor:pointer;
					overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
				}
			}
		}
	}
</style>
